1.1. 3.4 功能-Markdown
【精】Markdown功能+Pygments-高亮:http://railscasts.com/episodes/207-syntax-highlighting-revised?view=asciicast
Markdown-Pygments-Css样式:https://github.com/richleland/pygments-css
【精】Markdown-Coderay-高亮:https://ruby-china.org/topics/474
Markdown-Coderay-代码块标题code_header:https://github.com/ryanb/railscasts/blob/master/lib/code_formatter.rb
Markdown-coderay-css样式1:http://railscasts.com/episodes/207-syntax-highlighting?view=asciicast
Markdown-Coderay-Css样式2:http://www.crashingchandelier.com/articles/6-rails-5-blog-with-coderay-syntax-highlighter
1.1.1. 3.4.1 工具对比
0)redcarpet 必备的 Markdown to html 解析器:下载 27150000,最后更新 2016 1)Coderay 推荐第一选择(速度最快,RailsCast 网站使用有 css,但支持语言少):下载 104,000,000,最后更新 2017 2)pygments.rb 推荐第二选择(支持语言多,Github 网站使用,css 下载 https://github.com/richleland/pygments-css/blob/master/default.css):下载 3,700,000,最后更新 2017 3)rouge 可用: 是简化的 pygments,下载 19,890,000,最后更新 2018 4)uv 弃用(使用人数太少):下载 14,000,最后更新 2011 5)kramdown 弃用(适用于 ruby,不适合 rails):下载 22,420,000,最后更新 2019 6)kramdown-rails 弃用(使用人数太少):下载 14,000,最后更新 2014
1.1.2. 3.4.2 推荐1 Coderay
app/helper/application_helper.rb
# Markdown 语法高亮:Coderay
class HTMLwithCodeRay < Redcarpet::Render::HTML
def block_code(code, language)
if language
<<-EOS
<div class="code_block">
<div class="code_header">
#{CGI.escapeHTML(language.to_s)}
</div>
#{CodeRay.scan(code, language ||= :text).div(tab_width: 2, line_numbers: :inline)}
</div>
EOS
else
CodeRay.scan(code, language ||= :text).div(tab_width: 2, line_numbers: :inline)
end
end
end
# Markdown to Html 解析:Coderay
def markdown(text)
renderer = HTMLwithCodeRay.new(hard_wrap: true, filter_html: true)
options = {
autolink: true,
no_intra_emphasis: true,
fenced_code_blocks: true,
lax_html_blocks: true,
strikethrough: true,
superscript: true
}
Redcarpet::Markdown.new(renderer, options).render(text).html_safe
end
app/assets/stylesheets/coderay.css.scss
.CodeRay, .CodeRay pre {
font-family: 'Menlo', 'Courier New', 'Terminal', monospace;
background-color: #232323;
color: #E6E0DB;
}
.CodeRay pre {
margin: 0px;
padding: 0px;
}
/*** CODE BLOCKS ***/
.code_block {
margin: 12px 0;
}
.code_header {
position: relative;
background-color: #E0E0E0;
font-size: 12px;
padding: 4px 7px;
border: solid 1px #B6B6B6;
border-bottom: none;
}
.code_header .clippy {
position: absolute;
top: 4px;
right: 7px;
}
.clippy_label {
position: absolute;
right: 20px;
top: 1px;
text-align: right;
width: 200px;
font-size: 10px;
color: #555;
}
.CodeRay {
overflow: auto;
border: 1px solid #777;
border-top: none;
padding: 5px 7px;
font-size: 13px;
margin: 0;
line-height: 17px;
}
code {
border: solid 1px #CCC;
background-color: #EEE;
font-family: 'Menlo', 'Courier New', 'Terminal', monospace;
padding: 0 3px;
}
pre code {
display: block;
background-color: #EEE;
padding: 5px 7px;
}
.CodeRay .an { color:#E7BE69 } /* html attribute */
.CodeRay .c { color:#BC9358; font-style: italic; } /* comment */
.CodeRay .ch { color:#509E4F } /* escaped character */
.CodeRay .cl { color:#FFF } /* class */
.CodeRay .co { color:#FFF } /* constant */
.CodeRay .fl { color:#A4C260 } /* float */
.CodeRay .fu { color:#FFC56D } /* function */
.CodeRay .gv { color:#D0CFFE } /* global variable */
.CodeRay .i { color:#A4C260 } /* integer */
.CodeRay .il { background:#151515 } /* inline code */
.CodeRay .iv { color:#D0CFFE } /* instance variable */
.CodeRay .pp { color:#E7BE69 } /* doctype */
.CodeRay .r { color:#CB7832 } /* keyword */
.CodeRay .kw { color:#CB7832 } /* keyword */
.CodeRay .rx { color:#A4C260 } /* regex */
.CodeRay .s { color:#A4C260 } /* string */
.CodeRay .sy { color:#6C9CBD } /* symbol */
.CodeRay .ta { color:#E7BE69 } /* html tag */
.CodeRay .pc { color:#6C9CBD } /* boolean */
html
<%= markdown @artical.description %>
1.1.3. 3.4.2 推荐2 Pygments.rb
app/helper/application_helper.rb
# Markdown 语法高亮:Pygment
class HTMLwithPygments < Redcarpet::Render::HTML
def block_code(code, language)
Pygments.highlight(code, lexer: language, options: {linenos: true, :full => true})
end
end
# Markdown to Html 解析:Pygment
def markdown(text)
renderer = HTMLwithPygments.new(hard_wrap: true, filter_html: true)
options = {
autolink: true,
no_intra_emphasis: true,
fenced_code_blocks: true,
lax_html_blocks: true,
strikethrough: true,
superscript: true
}
Redcarpet::Markdown.new(renderer, options).render(text).html_safe
end
app/assets/stylesheets/pygments.css.erb
/*控制台输入 Pygments.styles 可以查看所有代码块高亮样式:
["manni", "igor", "lovelace", "xcode", "vim", "autumn", "abap", "vs", "rrt", "native", "perldoc", "borland", "arduino", "tango", "emacs", "friendly", "monokai", "paraiso-dark", "colorful", "murphy", "bw", "pastie", "rainbow_dash", "algol_nu", "paraiso-light", "trac", "default", "algol", "fruity"]
*/
<%= Pygments.css(style: "default") %>
html
<%= markdown @artical.description %>